#postView { position: relative; padding: 25px 32px 32px 32px; min-width: 270px; max-width: 1920px; margin: 0 auto; section { // 제목 &.subject { font-size: 1.5rem; font-weight: 600; margin-bottom: 10px; } // 상단 &.attribution { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; div:first-child { flex-grow: 0; padding-right: 20px; } div:last-child { display: grid; grid-template-columns: auto auto; grid-template-rows: repeat(2, 1fr); grid-template-areas: "writer-info post-date" "post-info functions"; align-items: center; flex-grow: 1; column-gap: 0; row-gap: 10px; article { &.writer-thumb { grid-area: writer-thumb; > img { width: 100%; max-width: 92px; object-fit: cover; } } &.writer-info { grid-area: writer-info; > ul { li { &:nth-of-type(2) { align-self: center; font-size: 0.875rem; } } } } &.post-info { grid-area: post-info; } &.post-date { grid-area: post-date; text-align: right; } &.functions { grid-area: functions; justify-self: flex-end; } > ul { display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 0; list-style: none; li { position: relative; // 가운데 점 추가 &::after { content: '·'; margin-left: 10px; color: var(--text-muted); } // 마지막 li는 점 숨김 &:last-child::after { content: ''; margin: 0; } a, button { color: var(--text-link); text-decoration: none; &:hover { text-decoration: underline; color: var(--text-link-hover); } } } } } } @media (max-width: 1140px) { div:last-child { grid-template-columns: auto 1fr; grid-template-rows: auto auto auto auto; grid-template-areas: "writer-thumb writer-info" "writer-thumb post-info" "writer-thumb post-date" "writer-thumb functions"; align-items: center; grid-auto-rows: auto; row-gap: 2px; column-gap: 0; article { &.post-date { text-align: left; } &.functions { justify-self: start; padding-top: 4px; } } } } } &.content { min-height: 300px; display: flex; flex-direction: column; article { font-size: 1.063rem; line-height: 1.25; // 본문 내용 &:first-of-type { flex-grow: 1; // 첨부 파일 section.file-embed { display: inline-block; width: max-content; max-width: 100%; padding: 5px 40px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--bg-elevated); margin: 5px 0; box-sizing: border-box; .file-icon svg { width: 19px; height: 19px; display: inline-block; vertical-align: sub; padding-right: 5px; } &.image-style-align-left { margin-left: 0; margin-right: auto; } &.image-style-align-center { display: block; margin-left: auto; margin-right: auto; } &.image-style-align-right { margin-left: auto; margin-right: 0; } &:hover { background-color: var(--bg-subtle); border-color: var(--text-link-hover); cursor: pointer; } } p a { color: var(--text-link); text-decoration: none; &:hover, &:focus { text-decoration: underline; color: var(--text-link-hover); } } } // 태그 &:last-of-type { span { padding-right: 6px; a { color: var(--text-link); text-decoration: none; &:hover { text-decoration: underline; color: var(--text-link-hover); } } } } } } &.controls { display: flex; justify-content: space-between; align-items: center; gap: 0; article { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 7px; } } } hr { margin: 14px 0; } } // 인쇄 설정 @media print { body { /* 인쇄할 요소만 보이게 */ #main, #container { visibility: visible; display: block; all: unset; width: 100%; height: auto; position: static; padding: 0; margin: 0 auto; overflow: visible; } #header, #ticker, #footer, #aside { display: none; visibility: hidden; } html, body { width: 100%; height: auto; overflow: visible; } } }